<template>
  <div class="product-add">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="200px">
      <!--修改-->
      <div class="common-form">摊位申请编辑</div>
      <el-form-item label="姓名" prop="real_name">
        <el-input
          class="max-w460"
          v-model="form.real_name"
          placeholder="请输入姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input
          class="max-w460"
          v-model="form.mobile"
          placeholder="请输入手机号"
        ></el-input>
      </el-form-item>
      <el-form-item label="店铺名称" prop="store_name">
        <el-input
          class="max-w460"
          v-model="form.mobile"
          placeholder="请输入店铺名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="分类名称" prop="cate_name">
        <el-select
          v-model="form.cate_name"
          value-key=""
          placeholder=""
          clearable
          filterable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="门头照片" prop="photo">
        <el-row>
          <el-button icon="el-icon-picture-outline" @click="openUpload('photo')"
            >选择图片</el-button
          >
          <div v-if="form.photo != ''" class="img">
            <img :src="form.photo" width="100" height="100" />
          </div>
        </el-row>
      </el-form-item>
      <el-form-item label="绑定地区" prop="region_id">
        <el-cascader v-model="form.region_id" :options="regions" clearable width="300">
        </el-cascader>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input
          class="max-w460"
          v-model="form.address"
          placeholder="请输入详细地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="门牌号" prop="house_number">
        <el-input
          class="max-w460"
          v-model="form.house_number"
          placeholder="请输入门牌号"
        ></el-input>
      </el-form-item>
      <el-form-item label="审核状态" prop="apply_status">
        <el-radio-group v-model="form.apply_status">
          <el-radio :label="10">待审核</el-radio>
          <el-radio :label="20">审核通过</el-radio>
          <el-radio :label="30">驳回</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="入驻商户"
        prop="shop_supplier_id"
        v-if="form.apply_status == 20"
        :rules="rules"
      >
        <el-select v-model="form.shop_supplier_id" placeholder="请选择">
          <el-option value="">请选择商户</el-option>
          <el-option
            v-for="item in supplier"
            :key="'sup_'+item.shop_supplier_id"
            :label="item.name"
            :value="item.shop_supplier_id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="驳回原因"
        prop="reject_reason"
        v-if="form.apply_status == 30"
      >
        <el-input
          class="max-w460"
          v-model="form.reject_reason"
          placeholder="请输入驳回原因"
        ></el-input>
      </el-form-item>
      <div class="common-button-wrapper">
        <el-button size="small" type="info" @click="cancelFunc">取消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="onSubmit"
          :loading="loading"
          >提交</el-button
        >
      </div>
    </el-form>
    <!--上传图片组件-->
    <Upload
      v-if="isupload"
      :isupload="isupload"
      :type="type"
      @returnImgs="returnImgsFunc"
      >上传图片</Upload
    >
  </div>
</template>

<script>
import PlusApi from '@/api/plus.js';
import StallApi from "@/api/stall.js";
import DataApi from "@/api/data";
import Upload from "@/components/file/Upload";
import { formatModel } from "@/utils/base.js";
export default {
  components: {
    /*上传组件*/
    Upload
  },
  data() {
    return {
      form: {
        apply_id: 0,
        real_name: "",
        mobile: "",
        store_name: "",
        cate_name: "",
        photo: "",
        address: "",
        house_number: "",
        apply_status: "10",
        apply_time: "",
        reject_reason: "",
        region_id: 0,
        shop_supplier_id: ''
      },
      supplier: [],
      shop_supplier_id: '',
      loading: false,
      /*是否上传图片*/
      isupload: false,
      options: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "外卖点",
          label: "外卖点"
        },
        {
          value: "饭店",
          label: "饭店"
        },
        {
          value: "夜宵摊",
          label: "夜宵摊"
        },
        {
          value: "其他",
          label: "其他"
        }
      ],
      regions: [],
      rules:[
        {
          type:"number",
          required: true,
          message: '请选择入驻商户',
        }
      ],
    };
  },
  created() {
    this.form.apply_id = this.$route.query.apply_id;
    this.getParams();
    this.getRegionList();
    this.getSupplierList();
  },

  methods: {
    getRegionList() {
      let self = this;
      DataApi.getRegionTwo().then(res => {
        self.regions = res.data.regionData;
      });
    },
    getParams() {
      let self = this;
      // 取到路由带过来的参数
      StallApi.getStall(
        {
          apply_id: self.form.apply_id
        },
        true
      )
        .then(data => {
          // 将数据放在当前组件的数据内
          self.form = formatModel(self.form, data.data.model);
          self.form.apply_status = data.data.model.apply_status.value;
          self.form.region_id = [
            data.data.model.province_id,
            data.data.model.city_id,
            data.data.model.county_id
          ];
          console.log(self.form);
        })
        .catch(error => {});
    },
    getSupplierList() {
      let params = this.form;
      PlusApi.getSupplierList(params, true)
        .then(data => {
          this.supplier = data.data.list
        })
        .catch(error => {

        });
    },
    onSubmit() {
      let self = this;
      let form = self.form;
      if(form.apply_status==20&&form.shop_supplier_id==0){
        self.$message({
          message: "请选择商户",
          type: "error"
        });
        return;
      }
      self.$refs.form.validate(valid => {
        if (valid) {
          self.loading = true;
          StallApi.editStall(form, true)
            .then(data => {
              self.$message({
                message: "恭喜你，修改成功",
                type: "success"
              });
              self.$router.push("/user/stall/index");
            })
            .catch(error => {
              self.loading = false;
            });
        }
      });
    },
    /*上传*/
    openUpload(e) {
      this.type = e;
      this.isupload = true;
    },
    /*获取图片*/
    returnImgsFunc(e) {
      console.log(e);
      if (e != null && e.length > 0) {
        if (this.type == "photo") {
          this.form.photo = e[0].file_path;
        }
      }
      this.isupload = false;
    },
    /*取消*/
    cancelFunc() {
      this.$router.back(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.product-add {
  padding-bottom: 50px;
}
</style>
<style>
  .el-cascader .el-input__inner {
    min-width: 300px;
    width: auto !important;
  }
</style>
